window.onload = function () {
    // 轮播图 
    let index = 0;
    let aLi = document.querySelectorAll(".pic li");
    // console.log(aLi)
    let bg = document.querySelector(".bg");
    let picName = ["pic0", "pic1", "pic2", "pic3", "pic4", "pic5", "pic6", "pic7", "pic8", "pic9"]
    // 遍历给当前index小圆点上色
    let span = document.querySelectorAll(".mark span");
    function setSpanColor() {
        for (var i = 0; i < span.length; i++) {
            if (i === index) {
                span[i].classList.add("active");
                // console.log(aLi[i].children[0].children[0].src);
                bg.style.backgroundImage = 'url(' + aLi[i].children[0].children[0].src + ')'
            } else {
                span[i].classList.remove("active");
            }
        }
    }

    setSpanColor();
    // 给图片换类名来交换位置
    // 下一页
    function nextPic() {
        picName.unshift(picName[9]);
        picName.pop();
        for (var i = 0; i < aLi.length; i++) {
            aLi[i].className = picName[i]
        }
        index++;
        if (index > 9) {
            index = 0;
        }
        setSpanColor();
    }
    // nextPic();
    // 绑定下一页按钮 创建监听
    let btnr = document.querySelector(".btnr");
    btnr.addEventListener("click", nextPic);
    // 上一页
    function prevPic() {
        picName.push(picName[0]);
        picName.shift();
        for (var i = 0; i < aLi.length; i++) {
            aLi[i].className = picName[i]
        }
        index--;
        if (index < 0) {
            index = 9;
        }
        setSpanColor();
    }
    let btnl = document.querySelector(".btnl");
    btnl.addEventListener("click", prevPic);
    // 自动轮播4s
    // 移入停止
    let autoplay = setInterval(() => {
        nextPic();
    }, 4000);
    let bannerBox = document.querySelector(".banner-box");
    bannerBox.addEventListener("mouseover", () => {
        clearInterval(autoplay);
    })
    // 移出播放
    bannerBox.addEventListener("mouseout", () => {
        // 需要先清除
        clearInterval(autoplay);
        autoplay = setInterval(() => {
            nextPic();
        }, 4000);
    })


    // 点击小圆点切换
    let mark = document.querySelector(".mark");

    mark.addEventListener("click", (e) => {
        if (e.target.nodeName.toLowerCase() === "span") {
            index = Number(e.target.dataset.n);
            // 类名重新排序
            picName.sort();
            let move = picName.splice(picName.length - index, index);
            picName.unshift(...move);
            // console.log(picName)
            for (var i = 0; i < aLi.length; i++) {
                aLi[i].className = picName[i]

            }
            setSpanColor()
        }
    })



}    